<template>
  <div class="score-table-container">
    <!-- 成绩表格 -->
    <el-table
      :data="data"
      v-loading="loading"
      stripe
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="500"
      empty-text="暂无数据">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
      <el-table-column prop="project.name" label="项目名称" width="150" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="student.realName" label="学生姓名" width="120" align="center">
        <template #default="scope">
          <el-link type="primary" @click="handleStudentClick(scope.row.student)">
            {{ scope.row.student.realName }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="student.studentNumber" label="学号" width="120" align="center"></el-table-column>
      <el-table-column prop="student.department" label="学院" width="120" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="round" label="轮次" width="80" align="center">
        <template #default="scope">
          <el-tag :type="getRoundTagType(scope.row.round)" size="small">
            {{ getRoundText(scope.row.round) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="scoreValue" label="成绩值" width="100" align="center">
        <template #default="scope">
          <span class="score-value" :class="getScoreClass(scope.row)">
            {{ formatScore(scope.row.scoreValue) }} {{ scope.row.unit }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="ranking" label="排名" width="80" align="center">
        <template #default="scope">
          <div v-if="scope.row.ranking" class="ranking-badge" :class="getRankingClass(scope.row.ranking)">
            {{ scope.row.ranking }}
          </div>
          <span v-else class="text-gray-500">-</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)" size="small">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="recorder.realName" label="记录人" width="100" align="center"></el-table-column>
      <el-table-column prop="createdAt" label="录入时间" width="160" align="center">
        <template #default="scope">
          {{ formatDateTime(scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template #default="scope">
          <el-button-group size="mini">
            <el-button
              type="primary"
              icon="el-icon-view"
              @click="handleViewDetail(scope.row)"
              title="查看详情">
            </el-button>
            <el-button
              type="success"
              icon="el-icon-trophy"
              @click="handleViewRanking(scope.row)"
              title="查看排名">
            </el-button>
            <el-button
              v-if="scope.row.status === '待审核'"
              type="warning"
              icon="el-icon-check"
              @click="handleApprove(scope.row)"
              title="审核">
            </el-button>
            <el-button
              v-if="scope.row.status === '待审核'"
              type="danger"
              icon="el-icon-close"
              @click="handleReject(scope.row)"
              title="驳回">
            </el-button>
            <el-button
              v-if="scope.row.status === '已驳回'"
              type="primary"
              icon="el-icon-view"
              @click="handlePublish(scope.row)"
              title="公示">
            </el-button>
            <el-button
              v-if="scope.row.status === '有异议'"
              type="warning"
              icon="el-icon-warning"
              @click="handleDispute(scope.row)"
              title="处理异议">
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ScoreTable',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    selectedScores: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 表格选择改变
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection)
    },

    // 查看详情
    handleViewDetail(row) {
      this.$emit('view-detail', row)
    },

    // 查看排名
    handleViewRanking(row) {
      this.$emit('view-ranking', row)
    },

    // 审核
    handleApprove(row) {
      this.$emit('approve', row)
    },

    // 驳回
    handleReject(row) {
      this.$emit('reject', row)
    },

    // 公示
    handlePublish(row) {
      this.$emit('publish', row)
    },

    // 处理异议
    handleDispute(row) {
      this.$emit('dispute', row)
    },

    // 学生点击
    handleStudentClick(student) {
      this.$emit('student-click', student)
    },

    // 获取轮次标签类型
    getRoundTagType(round) {
      if (round === 4) return 'danger' // 决赛
      if (round === 3) return 'warning' // 半决赛
      if (round === 2) return 'primary' // 预赛
      return 'info' // 初赛
    },

    // 获取轮次文本
    getRoundText(round) {
      if (round === 4) return '决赛'
      if (round === 3) return '半决赛'
      if (round === 2) return '预赛'
      return `第${round}轮`
    },

    // 获取状态标签类型
    getStatusTagType(status) {
      const statusMap = {
        '待审核': 'warning',
        '已公示': 'success',
        '已驳回': 'danger',
        '有异议': 'info'
      }
      return statusMap[status] || 'info'
    },

    // 获取排名样式类
    getRankingClass(ranking) {
      if (ranking === 1) return 'gold'
      if (ranking === 2) return 'silver'
      if (ranking === 3) return 'bronze'
      return 'normal'
    },

    // 获取成绩样式类
    getScoreClass(row) {
      if (row.ranking === 1) return 'gold-score'
      if (row.ranking === 2) return 'silver-score'
      if (row.ranking === 3) return 'bronze-score'
      return ''
    },

    // 格式化成绩
    formatScore(value) {
      if (value === null || value === undefined) return '-'
      return typeof value === 'number' ? value.toFixed(2) : value
    },

    // 格式化日期时间
    formatDateTime(dateTime) {
      if (!dateTime) return '-'
      return new Date(dateTime).toLocaleString('zh-CN')
    }
  }
}
</script>

<style scoped>
.score-table-container {
  width: 100%;
}

.score-value {
  font-weight: 600;
  font-size: 14px;
}

.gold-score {
  color: #ffd700;
  font-weight: bold;
}

.silver-score {
  color: #c0c0c0;
  font-weight: bold;
}

.bronze-score {
  color: #cd7f32;
  font-weight: bold;
}

.ranking-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  color: white;
}

.ranking-badge.gold {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #8b7500;
  box-shadow: 0 2px 4px rgba(255, 215, 0, 0.4);
}

.ranking-badge.silver {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #666;
  box-shadow: 0 2px 4px rgba(192, 192, 192, 0.4);
}

.ranking-badge.bronze {
  background: linear-gradient(135deg, #cd7f32, #daa520);
  color: white;
  box-shadow: 0 2px 4px rgba(205, 127, 50, 0.4);
}

.ranking-badge.normal {
  background-color: #909399;
  color: white;
}

.text-gray-500 {
  color: #909399;
}

/* 表格行悬停效果 */
.el-table__row:hover {
  background-color: #f5f7fa !important;
}

/* 表格单元格样式 */
.el-table .cell {
  padding: 8px 0;
}

/* 操作按钮组样式 */
.el-button-group {
  display: flex;
  flex-wrap: nowrap;
}

.el-button-group .el-button {
  margin-left: 0;
  padding: 5px 8px;
}

/* 链接样式 */
.el-link {
  font-weight: 500;
}

/* 加载动画 */
.el-table__body-wrapper {
  transition: opacity 0.3s ease;
}

.el-table__body-wrapper.loading {
  opacity: 0.6;
}

/* 空数据样式 */
.el-table__empty-text {
  color: #909399;
  font-size: 14px;
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-table {
    font-size: 12px;
  }

  .el-button-group .el-button {
    padding: 4px 6px;
    font-size: 12px;
  }

  .score-value {
    font-size: 12px;
  }

  .ranking-badge {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}
</style>